<template>
  <el-dialog title="选择红包" :visible.sync="dialogTableVisible" @close="closeDio">
    <el-row>
      <el-table :data="coupon_list.data" ref="multipleTable" v-loading="loading" stripe header-row-class-name="head_color"
        tooltip-effect="dark" style="width: 99.9%">
        <el-table-column label="红包ID" min-width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="红包名称" min-width="120">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="红包金额" min-width="120">
          <template slot-scope="scope">{{ scope.row.money|keepTwoNum  }}</template>
        </el-table-column>
        <el-table-column label="累计消费满" min-width="120">
          <template slot-scope="scope">{{ scope.row.cdn_xfm|keepTwoNum  }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button :loading='$store.state.isLoading' type="primary" size="mini" @click="sel_coupon(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="coupon_list.all_num"></el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  export default {
    name: "coupon_dialog",
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        pageSize: 10,
        currentPage: 1,
        coupon_list: [],
        loading: false,
        data: [],
        dialogTableVisible: false
      };
    },
    created() {
      this.get_coupon();
    },
    methods: {
      closeDio() {
        this.$emit("close_coupon");
        this.dialogTableVisible = false;
      },
      sel_coupon(item) {
        this.$emit("receive_coupon", item.id);
        this.dialogTableVisible = false;
      },
      handleSizeChange(val) {
        var params = {};
        params.page = "";
        params.page_size = val;
        this.get_coupon(params);
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        var params = {};
        params.page = val;
        params.page_size = this.pageSize;
        this.get_coupon(params);
      },
      get_coupon(data) {
        this.loading = true;
        var params = {};
        data = data || {};
        params = data;
        this.$api.getNews.getPacketList(params).then(res => {
          if (res.data.code == 200) {
            this.coupon_list = res.data.result;
          }
          this.loading = false;
        });
      }
    },
    watch: {
      show(val1, val2) {
        if (val1 == val2) {
          return;
        }
        this.$store.dispatch("getShopsAll", {});
        this.dialogTableVisible = val1;
        this.currentPage1 = 1;
      }
    }
  };
</script>

<style scoped>
</style>
